<template>
	<main>
		<v-headerx></v-headerx>
		<div class="select">
			<ul>
				<li>全部类型 <i class="iconfont icon-xiajiantou"></i></li>
				<li>3km <i class="iconfont icon-xiajiantou"></i></li>
				<li>距离优先 <i class="iconfont icon-xiajiantou"></i></li>
				<li>筛选 <i class="iconfont icon-xiajiantou"></i></li>
			</ul>
		</div>
		<div class="container">
			<ul>
				<li>
					<a href="">
						<figure><img src="../assets/images/like.jpg" alt=""></figure>
					<aside>
						<div class="name">MAG环球魔幻世界<span class="ticket">票</span><span class="discount">套餐</span></div>
						<div class="rank"><span class="score"><i></i><i></i><i></i><i></i><i class="gray
						"></i><em>4.2分</em></span><span class="consume">145621消费</span></div>
						<div class="price">
				            <span class="strong">￥99</span><span class="strong-color">起</span>
				            <span class="line-right">
				                    花城汇/高德置地
				            </span>
	        			</div>
					</aside>
					</a>
				</li>
				<li>
					<a href="">
						<figure><img src="../assets/images/like.jpg" alt=""></figure>
					<aside>
						<div class="name">MAG环球魔幻世界<span class="ticket">票</span><span class="discount">套餐</span></div>
						<div class="rank"><span class="score"><i></i><i></i><i></i><i></i><i class="gray
						"></i><em>4.2分</em></span><span class="consume">145621消费</span></div>
						<div class="price">
				            <span class="strong">￥99</span><span class="strong-color">起</span>
				            <span class="line-right">
				                    花城汇/高德置地
				            </span>
	        			</div>
					</aside>
					</a>
				</li><li>
					<a href="">
						<figure><img src="../assets/images/like.jpg" alt=""></figure>
					<aside>
						<div class="name">MAG环球魔幻世界<span class="ticket">票</span><span class="discount">套餐</span></div>
						<div class="rank"><span class="score"><i></i><i></i><i></i><i></i><i class="gray
						"></i><em>4.2分</em></span><span class="consume">145621消费</span></div>
						<div class="price">
				            <span class="strong">￥99</span><span class="strong-color">起</span>
				            <span class="line-right">
				                    花城汇/高德置地
				            </span>
	        			</div>
					</aside>
					</a>
				</li><li>
					<a href="">
						<figure><img src="../assets/images/like.jpg" alt=""></figure>
					<aside>
						<div class="name">MAG环球魔幻世界<span class="ticket">票</span><span class="discount">套餐</span></div>
						<div class="rank"><span class="score"><i></i><i></i><i></i><i></i><i class="gray
						"></i><em>4.2分</em></span><span class="consume">145621消费</span></div>
						<div class="price">
				            <span class="strong">￥99</span><span class="strong-color">起</span>
				            <span class="line-right">
				                    花城汇/高德置地
				            </span>
	        			</div>
					</aside>
					</a>
				</li>
			</ul>
		</div>
	</main>
</template>

<script>
	import headerx from "../components/headerx.vue"

	export default{
		name:"nearby",
		components:{
			"v-headerx":headerx
		},
		mounted(){
			this.$store.state.title="附近";
			this.$store.state.index=2;	
		}
	}
</script>

<style scoped>
	.select{
		width:100%;
		box-sizing:border-box;
		background: white;
		overflow:hidden;
	}
	.select ul li{
	    width: 25%;
	    height: .9rem;
	    line-height: .9rem;
	    text-align: center;
	    font-size: .28rem;
	    float: left;
	    border-bottom: 1px solid #c6c0b3;
	    color:#666;
	}
	.container{
		background: white;
	    padding-left: .2rem;
        margin-bottom: 1rem;
	}
	.container h3{
	    font-size: .34rem;
	    padding: .2rem 0;
	    color: #333;
	    border-bottom: 1px solid #DDD8CE;
	}
	.container ul li{
		display: flex;
		border-bottom: 1px solid #DDD8CE;
		padding: .2rem 0;
	}
	.container ul li>a{
		display: flex;
		flex-grow: 1;
	}
	.container figure{
	    width: 1.8rem;
	    height: 1.64rem;
	}
	.container figure img{
		width: 100%;
		height: 100%;
	}
	.container aside{
		flex-grow: 1;
		font-size: .3rem;
		padding-left: .2rem;
	    padding-right: .2rem;
	}
	.container .name{
	    margin-bottom: .12rem;
	    font-size: .3rem;
	    font-weight: 400;
	    color: #333;
	}
	.container .name>span{
	    border-radius: .06rem;
	    color: #fff;
	    display: inline-block;
	    font-size: .24rem;
	    height: .28rem;
	    width: .28rem;
	    text-align: center;
	    line-height: .28rem;
	    font-style: normal;
	    vertical-align: top;
	    margin-top: .04rem;
	    margin-left: .1rem;
	}
	.container .name .ticket{
		background: #4dc8f1;
	}
	.container .name .discount{
		background: #ff9400;
	}
	.container .rank{
	   font-size: .24rem;
	    margin-top: .3rem;
	    margin-bottom: .14rem;
	    color: #666;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	}
	.container .rank .score i::before{
		content:"★";
		color:#fdb338;
		margin-right: .04rem;
	    font-style: initial;
	}
	.container .rank .score .gray::before{
		color:#E2E2E2;
		margin-right: .2rem;
	}
	.container .rank .score em{
	    font-style: normal;
		color:#fdb338;
	}
	.container .rank .consume{
		float: right;
	}

	.container .price{
		color: #666;
	}
	.container .strong{
	    font-size: .38rem;
	    color: #06c1ae;
	}
	.container .strong-color{
	    font-size: .24rem;
	    color: #666;
	}
	.container .line-right{
		float: right;
		font-size: .24rem;
		margin-top: .1rem;
	    max-width: 1.4rem;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
</style>